<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>popover</title>
    <link href="../../css/bootstrap3.min.css" rel="stylesheet">
    <style>
        body {
            position: relative;
            margin-top: 10%;
            left: 30%;
            padding: 0;
        }
    </style>
</head>
<body>
    <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-title="标题" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
        Popover on left
    </button>

    <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-title="标题" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
        Popover on top
    </button>

    <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-title="标题" data-content="Vivamus
    sagittis lacus vel augue laoreet rutrum faucibus.">
        Popover on bottom
    </button>

    <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-title="标题" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
        Popover on right
    </button>
<script src="../../js/jquery.js"></script>
<script src="../../lib/Koala_ToolTip.js">  </script>
<script src="../../lib/Koala_Popover.js"></script>
<script>
    $(function(){
        $('[data-toggle="popover"]').popover();
    });
</script>
</body>
</html>